import React, { Component } from 'react'
import { Upload, Icon, Modal } from 'antd';
import styles from './UploadImg.less'
import API from '../../../../services/ipConfig'

export default class UploadImg extends Component {
  state = {
    previewVisible: false,
    previewImage: '',
    fileList: [],
  };

  handleCancel = () => this.setState({ previewVisible: false })

    handlePreview = (file) => {
      this.setState({
        previewImage: file.url || file.thumbUrl,
        previewVisible: true,
      });
    }



  render() {
    const { previewVisible, previewImage } = this.state;
    const { fileList } = this.props

    const uploadButton = (
      <div>
        <Icon type="plus" />
        <div className="ant-upload-text">上传图片</div>
      </div>
    );
    const actionurl = `${API}/resource/upload`
    return (
      <div className={styles.uploadImg}>
        <Upload
          action={actionurl}
          listType="picture-card"
          fileList={fileList}
          onPreview={this.handlePreview}
          onChange={this.props.handleMainImgChange}
          onRemove={this.props.onRemoveSingelImg}
        >
          {fileList && fileList.length >= 1 ? null : uploadButton}
        </Upload>
        <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
          <img alt="example" style={{ width: '100%' }} src={previewImage} />
        </Modal>
      </div>
    )
  }
}
